<template>
  <div class="network-tab">

    <ga-row :gutter="16" style="margin-bottom: 8px;">
      <ga-col :span="8">
        <BorderChartWithPicker title="请求量" :option="chartOptions.requestOption" :params="lineParams"
          @on-time-refresh="getRequestCountLine" @on-filter="() => emits('on-filter')"></BorderChartWithPicker>
      </ga-col>
      <ga-col :span="8">
        <BorderChartWithPicker title="错误率" :option="chartOptions.errorOption" :params="lineParams"
          @on-time-refresh="getErrorLine" @on-filter="() => emits('on-filter')"></BorderChartWithPicker>
      </ga-col>
      <ga-col :span="8">
        <BorderChartWithPicker :option="chartOptions.errorOption" :params="lineParams" @on-time-refresh="getErrorLine"
          @on-filter="() => emits('on-filter')">
          <template v-slot:title>

            <ga-select size="small" :bordered="false" v-model:model-value="respSelectValue" style=" width: 130px">
              <ga-option value="avg">
                平均响应时间
              </ga-option>
              <ga-option value="p95">
                P95 响应时间
              </ga-option>
            </ga-select>
          </template>
        </BorderChartWithPicker>
      </ga-col>

    </ga-row>
    <ga-row :gutter="16" style="margin-bottom: 8px;">
      <ga-col :span="8">
        <BorderChartWithPicker title="重传数" :option="chartOptions.retransmitOption" :params="lineParams"
          @on-time-refresh="getRetransmitLine" @on-filter="() => emits('on-filter')"></BorderChartWithPicker>
      </ga-col>
      <ga-col :span="8">
        <BorderChartWithPicker title="丢包数" :option="chartOptions.packetLossOption" :params="lineParams"
          @on-time-refresh="getPacketLossLine" @on-filter="() => emits('on-filter')"></BorderChartWithPicker>
      </ga-col>
      <ga-col :span="8">
        <BorderChartWithPicker title="SRTT" :option="chartOptions.srttOption" :params="lineParams"
          @on-time-refresh="getSRTTLine" @on-filter="() => emits('on-filter')"></BorderChartWithPicker>
      </ga-col>
    </ga-row>
    <ga-row :gutter="16" style="margin-bottom: 8px;">
      <ga-col :span="8">
        <BorderChartWithPicker title="0窗口" :option="chartOptions.zeroWindowOption" :params="lineParams"
          @on-time-refresh="getZeroWindowLine" @on-filter="() => emits('on-filter')"></BorderChartWithPicker>
      </ga-col>
      <ga-col :span="8">
        <BorderChartWithPicker title="活跃会话数" :option="chartOptions.sessionOption" :params="lineParams"
          @on-time-refresh="getSessionCountLine" @on-filter="() => emits('on-filter')"></BorderChartWithPicker>
      </ga-col>
      <ga-col :span="8">
        <BorderChartWithPicker title="发包数" :option="chartOptions.sendPackageOption" :params="lineParams"
          @on-time-refresh="getSendPackageLine" @on-filter="() => emits('on-filter')"></BorderChartWithPicker>
      </ga-col>
    </ga-row>
    <ga-row :gutter="16"><ga-col :span="8">
        <BorderChartWithPicker title="收包数" :option="chartOptions.receiverPackageOption" :params="lineParams"
          @on-time-refresh="getReceiverPackageLine" @on-filter="() => emits('on-filter')"></BorderChartWithPicker>
      </ga-col></ga-row>
  </div>
</template>

<script setup>
import { ref, watch, reactive, toRef, onMounted } from 'vue'
import BorderChartWithPicker from '@/components/BorderChartWithPicker'
import {

  queryErrorLine,
  queryP95RespTimeLine,
  queryPacketLossLine,
  queryReceiverPackageLine,
  queryRequestTotalLine,
  queryRespTimeLine,
  queryRetransmitLine,
  querySRTTLine,
  querySendPackageLine,
  querySessionCountLine,
  queryZeroWindowLine,
} from '@/api/topoNodeDetail';
import { isEmpty, map } from 'lodash'
import { lineOptionHandle, netLineOptionHandle } from '../topoNodeDetail/service';
import { basiclineOption } from '@/utils/chartOption';
import { handleWorkloadKey } from '@/utils'
import { bus } from '@/utils/eventBus';
defineOptions({
  name: 'NetworkTab'
})

const props = defineProps({
  node: {
    type: Object,
    default: () => ({})
  },
  queryTime: {
    type: Object,
    default: () => ({})
  },
  srcNodes: {
    type: Object,
    default: () => ([])
  },
  type: {
    type: String,
  }
})
const emits = defineEmits(['on-filter'])
const lineParams = ref()
const respSelectValue = ref('avg')
const chartOptions = reactive({
  requestOption: basiclineOption,
  errorOption: basiclineOption,
  resTimeOption: basiclineOption,
  p95ResTimeOption: basiclineOption,
  packetLossOption: basiclineOption,
  retransmitOption: basiclineOption,
  zeroWindowOption: basiclineOption,
  sessionOption: basiclineOption,
  sendPackageOption: basiclineOption,
  receiverPackageOption: basiclineOption,
  srttOption: basiclineOption
})
const type = toRef(props, 'type')
const getRequestCountLine = (params) => {
  queryRequestTotalLine(params, type.value).then(res => {
    console.log(res, 'res');

    if (res.code == 200) {
      const option = lineOptionHandle(res.data, 'rc');
      // setRequestOption(option);
      chartOptions.requestOption = option
    }
  });
}
const getErrorLine = (params) => {
  queryErrorLine(params, type.value).then(res => {
    if (res.code == 200) {
      const option = lineOptionHandle(res.data, 'error');

      chartOptions.errorOption = option
    }
  });
}
const getRespTimeLine = (params) => {
  queryRespTimeLine(params, type.value).then(res => {
    if (res.code == 200) {
      const option = lineOptionHandle(res.data, 'rt');
      chartOptions.resTimeOption = option
      // setRespTimeOption(option);
    }
  });
}
const getP95RespTimeLine = (params) => {
  queryP95RespTimeLine(params, type.value).then(res => {
    if (res.code == 200) {
      const option = lineOptionHandle(res.data, 'rt');
      chartOptions.p95ResTimeOption = option
      // setP95RespTimeOption(option);
    }
  });
}
const getPacketLossLine = (params) => {
  queryPacketLossLine(params, type.value).then(res => {
    const { lineChartVos, total } = res.data;
    const option = netLineOptionHandle(lineChartVos || [], '丢包数', '');
    // packetLoss.value = total
    chartOptions.packetLossOption = option
    // setPacketLoss(total);
    // setPacketLossOptions(option);
  })
}
const getRetransmitLine = (params) => {
  queryRetransmitLine(params, type.value).then(res => {
    const { lineChartVos, total } = res.data;
    const option = netLineOptionHandle(lineChartVos || [], '重传数', '');
    // retransmit.value = total
    chartOptions.retransmitOption = option
    // setRetransmit(total);
    // setRetransmitOptions(option);
  })
}
const getSRTTLine = (params) => {
  querySRTTLine(params, type.value).then(res => {
    const { lineChartVos, total } = res.data;
    const option = netLineOptionHandle(lineChartVos || [], 'SRTT', 'us');
    // SRTT.value = total;
    chartOptions.srttOption = option
    // setSRTT(total);
    // setSRTTOptions(option);
  })
}
// 0窗口
const getZeroWindowLine = (params) => {
  queryZeroWindowLine(params, type.value).then(res => {
    const { lineChartVos } = res.data;
    const option = netLineOptionHandle(lineChartVos || [], '0窗口', '');
    chartOptions.zeroWindowOption = option
    // setZeroWindowOptions(option);
  })
}

// 活跃会话数
const getSessionCountLine = (params) => {
  querySessionCountLine(params, type.value).then(res => {
    const { lineChartVos } = res.data;
    const option = netLineOptionHandle(lineChartVos || [], '活跃会话数', '');
    chartOptions.sessionOption = option
    // setSessionCountOptions(option);
  })
}

// 发包数
const getSendPackageLine = (params) => {
  querySendPackageLine(params, type.value).then(res => {
    const { lineChartVos } = res.data;
    const option = netLineOptionHandle(lineChartVos || [], '发包数', '');
    chartOptions.sendPackageOption = option
    // setSendPackageOptions(option);
  })
}

// 收包数
const getReceiverPackageLine = (params) => {
  queryReceiverPackageLine(params, type.value).then(res => {
    const { lineChartVos } = res.data;
    const option = netLineOptionHandle(lineChartVos || [], '收包数', '');
    chartOptions.receiverPackageOption = option
    // setReceiverPackageOptions(option);
  })
}

const getLine = () => {
  const type = props.type
  const { from, to } = props.queryTime
  const {
    masterIp: srcMasterIp,
    namespace: srcNamespace,
    workloadKind: srcWorkloadKind,
    workloadName: srcWorkloadName,
  } = handleWorkloadKey(props.node?.srcWorkloadKey || "");
  const {
    masterIp: dstMasterIp,
    namespace: dstNamespace,
    workloadKind: dstWorkloadKind,
    workloadName: dstWorkloadName,
  } = handleWorkloadKey(props.node?.dstWorkloadKey || "");
  const params = {
    dstMasterIp,
    dstNamespace,
    dstWorkloadKind,
    dstWorkloadName,
    from,
    to,
    srcWorkloadList: [
      {
        masterIp: srcMasterIp,
        namespace: srcNamespace,
        workloadName: srcWorkloadName,
        workloadKind: srcWorkloadKind,
      },
    ],
  };
  const p = type !== "pod" ? Object.assign({ isNode: 0 }, params) : params;
  lineParams.value = p
  getRequestCountLine(p);
  getErrorLine(p);
  getRespTimeLine(p);
  getP95RespTimeLine(p);
  getPacketLossLine(p);
  getRetransmitLine(p);
  getSRTTLine(p);
  getZeroWindowLine(p);
  getSessionCountLine(p);
  getSendPackageLine(p);
  getReceiverPackageLine(p);
};

watch([() => props.node, () => props.queryTime], ([edgeInfo, queryTime]) => {
  console.log('node edgeDetail', edgeInfo, queryTime);
  if (!isEmpty(edgeInfo) && queryTime.from) {

    getLine()
  }
})
onMounted(() => {
  bus.on('updateTopoEdgeDetail', () => {
    if (!isEmpty(props.node) && props.queryTime.from) {
      getLine()
    }
  })
})
</script>

<style scoped lang="less"></style>
